<template>
    <div class="ButtonImage">
        <el-button @click="isShowUploadDialog = true" v-bind="$attrs">
            {{ props.text }}
            <el-icon class="el-icon--right" v-if="isShowCheckIcon">
                <Select />
            </el-icon>
        </el-button>

        <MyDialog v-model="isShowUploadDialog" :title="props.text" :type="dialogType" :append-to-body="props.appendToBody" @close="isShowUploadDialog = false">
            <el-empty v-if="props.readonly == true && (Gx.IsEmpty(fileList) || fileList.length == 0)" :image-size="150" description="暂无上传内容" />
            <MyUpload v-else v-model="fileList" class="marb-10" :disabled="props.readonly" :onlyImg="onlyImg"></MyUpload>

            <template #footer>
                <el-button type="primary" v-if="!props.readonly" @click="onSubmit">确定</el-button>
            </template>
        </MyDialog>
    </div>
</template>

<script lang="ts" setup>
import { DialogType } from "@/_gx/TsEnums";
import Gx from "@/gx/Gx";
import { PropType } from "vue";

const props = defineProps({
    //v-model
    modelValue: {
        type: Array<any>,
        default: () => [],
    },

    //按钮显示的文字
    text: {
        type: String,
        default: "上传",
    },

    //按钮大小，同el-button的size
    btnSize: {
        type: String,
        default: "",
    },

    //是否为只读，如果是只读，没有确定按钮，没有上传功能
    readonly: {
        type: Boolean,
        default: false,
    },

    //弹框是否添加此属性
    appendToBody: {
        type: Boolean,
        default: false,
    },

    //弹框大小
    dialogType: {
        type: String as PropType<DialogType>,
        default: DialogType.C1,
    },

    //是否为只能上传图片
    onlyImg: {
        type: Boolean,
        default: false,
    },
});

//定义是否显示有文件的对号
const isShowCheckIcon = ref(false);

//定义点击按钮是否显示上传
const isShowUploadDialog = ref(false);

//文件列表
const fileList = ref<Array<any>>([]);

//加载时处理对号
onMounted(() => {
    if (Gx.IsEmpty(props.modelValue) || props.modelValue.length == 0) {
        isShowCheckIcon.value = false;
    } else {
        isShowCheckIcon.value = true;
        fileList.value = props.modelValue;
    }
});

//监听处理对号与数据
watch(
    () => props.modelValue,
    (newVal, oldVal) => {
        if (Gx.IsEmpty(newVal) || newVal.length == 0) {
            isShowCheckIcon.value = false;
        } else {
            isShowCheckIcon.value = true;
            fileList.value = newVal;
        }
    }
);

//确定按钮
const onSubmit = () => {
    emits("update:modelValue", fileList.value);
    isShowUploadDialog.value = false;
};

const emits = defineEmits(["update:modelValue"]);
</script>
